<template>
  <div>
    <n-data-table
        :columns="columns"
        :data="ttsTaskList"
        :loading="tableLoading"
        style="height: 500px;"
        flex-height
        :scroll-x="1200"
    >
    </n-data-table>
  </div>
</template>

<script lang="ts" setup>
import {h, onMounted, reactive, ref} from 'vue'
import {NButton, NPopselect, NTag, useNotification} from "naive-ui";
//@ts-ignore
import Bus from '@/components/file/box/GlobalUploader/utils/bus.js'
//@ts-ignore
import fileFunction from '@/libs/globalFunction/file.js'
import 'vue3-audio-player/dist/style.css'

import 'vue3-audio-player/dist/style.css'
import {storeToRefs} from "pinia";
import {useSystemStore} from "@/store/modules/useSystemStore";
import {voiceController} from "@/api/voice/ttsController.api";
import {mediaController} from "@/api/controller/media/mediaController";
import defaultMusicPng from '@/assets/images/file/file_music.png';

const {
  clientHeight,
  layoutHeaderHeight,
  darkTheme,
  tabsHeight
} = storeToRefs(useSystemStore());

const ttsTaskList = ref([])
const tableLoading = ref(false)
const formRef = ref(null)
const totalNum = ref(0)
const drawerWidth = ref(0)

const props = defineProps({
  voiceId: {
    type: String,
    default: '',
    required: false
  }
})

const getList = () => {
  tableLoading.value = true
  voiceController.getVoiceTaskList(props.voiceId).then((res) => {
    if (res.code === 200) {
      ttsTaskList.value = res.data
    }
  }).finally(() => {
    tableLoading.value = false
  })
}

const reGenerate = (row) => {
  row.loading = true
  voiceController.restartVoiceTask(row.id).then((res) => {
    if (res.code === 200) {
      window.$message.success('重新生成成功')
      getList()
    }
  }).finally(() => {
    row.loading = false
  })
}


onMounted(() => {
  getList()
})

const columns = [
  {
    title: '操作',
    key: 'operation',
    align: 'center',
    width: 80,
    fixed: 'left',
    render: (row) => {

        return [
          h(NButton, {
            type: 'error', size: 'small', style: 'margin-left:2px;', loading:row.loading, onClick: () => {
              reGenerate(row)
            }
          }, {default: () => '重新生成'})
        ]
    }
  },
  {
    title: '序号',
    key: 'orderNum',
    align: 'center',
    width: 80
  },{
    title: '文本内容',
    key: 'text',
    align: 'center',
    width: 200,
    ellipsis: {
      tooltip: true,
      lineClamp: 1
    }
  },
  {
    title: '类型',
    key: 'ttsType',
    align: 'center',
    width: 100,
    render: (row:any) => {
      let type = '付费'
      if (row.ttsType=='free'){
        type= '免费'
      }
      return type
    }
  },
  {
    title: '状态',
    align: 'center',
    key: 'status',
    width: 100,
    render: (row) => {
      if (row.status == 'SUCCESS') {
        return h(NTag, {type: 'success'}, {default: () => '成功'})
      } else if (row.status == 'IN_PROGRESS') {
        return h(NTag, {type: 'primary'}, {default: () => '执行中'})
      } else if(row.status=='SUBMITTED'){
        return h(NTag, {type: 'info'}, {default: () => '已提交'})
      }else if(row.status == 'FAILURE'){
        return h(NTag, {type: 'error'}, {default: () => '失败'})
      }else {
        return h(NTag, {type: 'warning'}, {default: () => '请等待'})
      }
    }
  },
  {
    title: '失败原因',
    align: 'center',
    key: 'failReason',
    width: 100,
    ellipsis: {
      tooltip: true,
      lineClamp: 1
    }
  },{
    title: '声音设置',
    align: 'center',
    width: 200,
    render: (row) => {
      return row.voiceName + ' / ' + row.role + ' / ' + row.style
    }
  } , {
    title: '音量/音调/频率',
    width: 200,
    align: 'center',
    render: (row) => {
      return row.volume + ' / ' + row.pitch + ' / ' + row.rate
    }
  }
]



</script>
